<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #myDiv {
            width: 400px;
            height: 200px;
            background: yellow;
            /* opacity: 0.5; */
        }
        
        .div1 {
            width: 400px;
            height: 200px;
            background: yellow;
        }
        
        .div2 {
            width: 800px;
            height: 400px;
            background: blue;
            opacity: 0.5;
            border: 2px solid red;
        }
        
        .btn {
            background: red;
        }
    </style>
</head>

<body>
    <div id="div1" class="div1">测试换样式</div>

    <div id="myDiv">这是原始内容</div>

    <button type="button" class="btn">点击我改变上面的内容</button>

    <button type="button" onclick="Test()">我是凑数的</button>

    <button type="button" id="btn1">点击换样式</button>
</body>

</html>
<script>
    let div1 = document.querySelector("#div1");
    let btn1 = document.getElementById("btn1");

    btn1.addEventListener("click", function() {
        div1.className = "div2";
    });


    let myDiv = document.querySelector("#myDiv");
    let btn = document.querySelector(".btn");



    btn.addEventListener("mouseenter", function() {
        myDiv.innerHTML = "更改以后的内容";
    });

    btn.addEventListener("mouseleave", function() {
        myDiv.innerHTML = "离开变回原始内容";
    });

    btn.addEventListener("click", function() {
        myDiv.style.backgroundColor = "blue";
        myDiv.style.width = 600 + "px";
        myDiv.style.opacity = 0.5;
    });

    function Test() {
        alert("下午好");
    }
    // Test();
</script>